﻿@model Epi.Web.MVC.Models.UserResetPasswordModel
@{
    ViewBag.Title = "Epi Info™ Cloud Data Capture - Create New Password";

}
<style>
    .pageheader {
        font: 24px Segoe UI;
        color: #286655;
    }

    .h2header {
        font: 18px Segoe UI;
        color: #286655;
        font-weight: 400;
        margin: 15px 0 0 0 !important;
    }

    .accountdiv {
        float: right;
        width: 400px;
        background: #EBEFF5;
        border: 1px solid #bfbfbf;
        border-radius: 15px;
        padding: 10px 10px 10px 20px;
    }

    .introdiv {
        float: left;
        width: 355px;
        padding: 0 10px 0 0;
    }

    .accountlabel {
        font: 14px Segoe UI;
        font-weight: 600;
    }

    .termsofuse {
        width: 790px;
        padding: 5px;
        height: 300px;
        border: 2px solid #bfbfbf;
        overflow: auto;
    }

    .submits {
        border: 1px #4e9689 solid;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
        padding: 3px 5px 3px 5px;
        color: #3f3f3f;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        font-size: 10pt;
        font-weight: bold;
        padding-left: 10px;
        height: 35px;
        width: 100px;
        cursor: pointer;
        border: 1px solid rgba(0,0,0,0.5);
        box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    }

        .submits:hover {
            background: #ffc;
        }

    .create {
        background: #5880b3;
        background: rgba(88,128,179,0.6);
        max-width: 160px;
        width: 100%;
    }

    [disabled] {
        color: #737882;
        background-color: #dfdfce;
        box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -o-box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
        -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.1), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
    }

        [disabled]:hover {
            background-color: #dfdfce;
        }

    .Account {
        width: 350px;
        height: 24px;
        font: 14px Segoe UI;
    }

    .field-validation-error {
        color: #ff0000;
        font-size: medium;
    }

    .field-validation-valid {
        display: none;
    }

    .input-validation-error {
        border: 1px solid #ff0000;
        background-color: #ffeeee;
    }

    .validation-summary-errors {
        font-weight: bold;
        height: 35px;
        color: #ff0000;
    }

    .validation-summary-valid {
        display: none;
    }
</style>

<script type="text/javascript">
    $(document).ready(function () {
        $("#ResetButton").click(function (e) {
            e.preventDefault();
            var password = $("#password").val();
            var cpassword = $("#password_confirm").val();
            if (password.toString() == cpassword.toString()) {

                if(ValidatePassword())
                {
                    $("#errMsgPwdCriteria").hide();
                    $('#myform').submit();

                }
                else {
                    $("#errMsgPwdCriteria").show();
                    $("#errMsgPwdNoMatch").hide();
                }
            }
            else {
                $("#errMsgPwdNoMatch").show();
                $("#errMsgPwdCriteria").hide();
            }

        });

    });

    function ValidatePassword()
    {
        var password = $("#password").val();
        var result;
        //Compares the length, if its not greater than MaximumLength
        if (password.length > @Model.MaximumLength ) {
        return false;
        }

    //Compares the length, if its not shorter than MinimumLength
    if (password.length < @Model.MinimumLength) {
        return false;
    }

    var ind = '@Model.UserName'.toLowerCase().indexOf('@@');
    var symbolsRegEx = /['@Model.Symbols.Replace(" ", "")']/;
    //Ensures if UserId/email is not in password
    if (@Model.UseUserIdInPassword.ToString().ToLower())
    {
        var index = parseInt(ind, 10);
    var uname = '@Model.UserName'.toLowerCase().substring(0, index);
    if(password.indexOf(uname) > -1 )
    {
        return false;
    }
    }

    //Ensures User first or last name is not in password
    if (@Model.UseUserNameInPassword.ToString().ToLower()) 
    {
        if(password.toLowerCase().indexOf('@Model.FirstName'.toLowerCase()) > 0 || password.toLowerCase().indexOf('@Model.LastName'.toLowerCase()) > 0)
    {
        return false;
    }
    }

    var successCounter = 0;
    //Ensures it contains lower case
    if (@Model.UseLowerCase.ToString().ToLower() ) {
        result = /[a-z]/.test(password);
    if (result) {
        successCounter++;
    }
    }
    //Ensures if contains UPPER case
    if (@Model.UseUpperCase.ToString().ToLower()) {
        result = /[A-Z]/.test(password);
    if (result) {
        successCounter++;
    }
    }
    //Ensures it has Symbols
    if (@Model.UseSymbols.ToString().ToLower())
    {
        result = symbolsRegEx.test(password);
    //Ensure if password has all the allowed symbols
    if (result) {
        var chars = password.split('');
        for (var i = 0; i < chars.length; i++) {
            ///
            if(/[^a-zA-Z0-9]/.test( chars[i] ) && !(symbolsRegEx.test(chars[i])))
            {
                result = false;
                break;
            }
        }
      }
     if (result) {
        successCounter++;
        }
    }

    //Ensures it has numbers
    if (@Model.UseNumeric.ToString().ToLower())
    {
    result = /\d/.test(password);
    if (result) {
        successCounter++;
    }
    }

    //Ensures if password contains least number of type required.
    if (@Model.NumberOfTypesRequiredInPassword > successCounter) {
        return false;
    }

    return result;

    }


</script>
<div id="pageHeader">
    <div id="pageTitle">
        <h2>
            Create New Password
        </h2>
    </div>
    <div id="userwelcome">
    </div>
    <div style="clear: both;">
    </div>
</div>
<div id="content" style="margin: 1em;">
    @using (Html.BeginForm("ResetPassword", "Login", FormMethod.Post, new { id = "myform" }))
    {
        @Html.ValidationSummary(true, "Please correct the errors and try again.")
        <div class="validation-summary-errors" id="errMsgPwdNoMatch" style="display: none;"><span>Please correct the errors and try again.</span>
            <ul><li>Passwords do not match. Please try again.</li>
            </ul></div>
            <div class="validation-summary-errors" id="errMsgPwdCriteria" style="display: none;"><span>Please correct the errors and try again.</span>
            <ul><li>Password entered does not match with the password policy. Please try again.</li>
            </ul></div>
        <div id="resetpwd" style="margin-bottom:2px; font-size:12pt; display: block;">
            <p>
                Create a new password before using Epi Info™ Cloud Data Capture.
            </p>
            <label for="newpass" style="display: block; font-weight: bold;">
                New Password:
            </label>
            @Html.PasswordFor(m => m.Password, new { id = "password", maxlength = Model.MaximumLength, minlength = Model.MinimumLength })<br />
            @Html.ValidationMessageFor(m => m.Password, null, new { @class = "required" })
            <label for="newpass" style="display: block; font-weight: bold;">
                Confirm Password:
            </label>
            @Html.PasswordFor(m => m.ConfirmPassword, new { id = "password_confirm", maxlength = Model.MaximumLength, minlength = Model.MinimumLength })<br />
            @Html.ValidationMessageFor(m => m.ConfirmPassword, null, new { @class = "required" })
            @Html.HiddenFor(m => m.UserName)
            @Html.HiddenFor(m => m.FirstName)
            @Html.HiddenFor(m => m.LastName)
            <p>
                <button type="submit" value="ResetPassword" class="default" id="ResetButton">
                    Submit
                </button>
                &nbsp;&nbsp;&nbsp;
                <button type="submit" value="Cancel" class="default" name="Action">
                    Cancel
                </button>
            </p>
        </div>

        <div id="pwdpolicy">
            <h3>
                Password Policy
            </h3>
            <ul style="margin: -11px 5px 5px 30px; padding: 0; line-height: 1.4em;">
                <li>Password must be @Model.MinimumLength to @Model.MaximumLength characters in length.</li>
                <li>Password may not contain your User ID or any part of your full name.</li>
                <li>Password must be created using @Model.NumberOfTypesRequiredInPassword of the following character types:</li>
                <ul style="margin: 1px 5px 5px 20px; padding: 0; line-height: 1.4em;">
                    <li>Upper case</li>
                    <li>Lower case</li>
                    <li>Numeric</li>
                    <li>Punctuation - <span>@Model.Symbols</span></li>
                </ul>

            </ul>
        </div>
        <div style="clear: both;">
        </div>
    }
</div>
